<template>
	<view class="userpost" :class="[AppStyle, isDark?'dark':'']" :style="{'background-color':isDark?'#1c1c1c':'#f6f6f6','min-height':isDark?'100vh':'auto'}">
		<!-- 用户榜 -->
		<block v-if="isshow">
			<view class="user-stats-section">
				<block v-if="userlist_of==1">
					<view @tap="toUserList" class="user-stats-card">
						<view class="user-stats-content">
							<view class="user-avatars">
								<tn-avatar-group :lists="latestUserAvatar" :txNum="4" size="sm"></tn-avatar-group>
								<text class="user-count">{{$t('global.total') + getNumber(usercount+userxn) + $t('comp.metas.people')}}</text>
							</view>
							<view class="user-title">
								<text class="title-text">{{$t('comp.metas.alluser')}}</text>
								<text class="tn-icon-right arrow-icon"></text>
							</view>
						</view>
					</view>
				</block>
			</view>
		</block>
		<!-- 分类内容 -->
		<block v-if="isshow">
			<!-- 风格1：紧凑卡片风格 -->
			<block v-if="quanzi_style==1">
				<view class="categories-container style-compact">
					<view class="categories-grid">
						<block v-for="(item, index) in topic" :key="index">
							<view class="category-card compact" @tap="toCategoryContents(item.name,item.mid,item.imgurl)">
								<view class="card-content">
									<view class="category-avatar">
										<view class="avatar-image" :style="'background-image:url(' + item.imgurl + ')'"></view>
										
									</view>
									<view class="category-info">
										<text class="category-name">{{ item.name }}</text>
										<text class="category-desc" v-if="item.description">{{ item.description}}</text>
										<text class="category-desc placeholder" v-else>{{$t('global.nodesc')}}</text>
									</view>
								</view>
								<view class="card-decoration"></view>
							</view>
						</block>
					</view>
				</view>
			</block>

			<!-- 风格2：大图卡片风格 -->
			<block v-if="quanzi_style==2">
				<view class="categories-container style-large">
					<view class="categories-grid-large">
						<block v-for="(item, index) in topic" :key="index">
							<view class="category-card large" @tap="toCategoryContents(item.name,item.mid,item.imgurl)">
								<view class="card-image-container">
									<view class="card-image" v-if="item.imgurl" :style="'background-image:url(' + item.imgurl + ')'">
										<view class="image-overlay"></view>
									</view>
									<view class="card-image default" v-else :style="'background-image:url(' + '../../static/page/pic.png' + ')'">
										<view class="image-overlay"></view>
									</view>
								</view>
								<view class="card-info">
									<text class="category-title">{{ item.name }}</text>
									<text class="category-subtitle" v-if="item.description">{{ item.description }}</text>
									<text class="category-subtitle placeholder" v-else>{{$t('comp.metas.nosetclassifyyet')}}</text>
								</view>
							</view>
						</block>
					</view>
				</view>
			</block>
		</block>

		<!-- 加载状态 -->
		<block v-else>
			<view class="loading-container">
				<image src="../../static/loading.gif" class="loading-gif"></image>
			</view>
		</block>
	</view>
</template>

<script>
	import { localStorage } from '../../js_sdk/mp-storage/mp-storage/index.js'
	import darkModeMixin from '@/utils/darkModeMixin.js'
	export default {
		props: {
			topic: {
				type: Array,
				default:() => []
			},
			moreText: {
				type: String,
				default: ""
			},
			isLoading: {
				type: Number,
				default: 1
			},
			name: "metas",
		},
		mixins: [darkModeMixin],
		data() {
			return {
				StatusBar: this.StatusBar,
				CustomBar: this.CustomBar,
				NavBar:this.StatusBar +  this.CustomBar,
				AppStyle:this.$store.state.AppStyle,
				// moreText:$t('common.loadmoretxt'),
				page: 1,
				quanzi_style: 1,
				userlist_of: 1,
				userlist_all: 0,
				mid: 0,
				isshow: false,
				userxn: 0,
				islogin: false,
				usercount: "0",
				sy_article: false,
				latestUserAvatar: [],
			}
		},
		onPullDownRefresh(){
			
		},
		onShow(){
			var that = this;
			that.$emit('loadMore')
			// #ifdef APP-PLUS
			plus.navigator.setStatusBarStyle("dark")
			// #endif
		},
		onLoad(){
			
		},
		onReachBottom() {
		    //触底后执行的方法，比如无限加载之类的
			var that = this;
			that.loadMore();
		},
		mounted() {
			var that = this;
			this.$emit('loadMore')
			if (localStorage.getItem('getPlugins')) {
				var cachedPlugins = localStorage.getItem('getPlugins');
				if (cachedPlugins) {
					const pluginList = JSON.parse(cachedPlugins);
					that.sy_article = pluginList.includes('sy_article');
				}
			}
			if(that.sy_article){
				that.getPluginConfig();
			}else{
				that.getContinuous()
			}
			that.getLatestUsers();
			// #ifdef APP-PLUS || MP || H5
			that.NavBar = that.CustomBar;
			// #endif
			// that.getTopPic(false);
		},
		methods: {
			toUserList() {
				uni.navigateTo({
					url: '/pages/user/userlist'
				})
			},
			getLatestUsers() {
				const that = this;
				that.$Net.request({
					url: that.$API.getUserList(),
					data: {
						"searchParams": "",
						"limit": 4,
						"page": 1,
						"searchKey": "",
						"order": "created"
					},
					method: "post",
					dataType: 'json',
					success: function(res) {
						if(res.data.code == 1) {
							const users = res.data.data;
							that.latestUserAvatar = users.map(user => ({
								userJson: {
									avatar: user.avatar
								}
							}));
						}
					}
				})
			},
			getContinuous() {
				var that = this;
				uni.request({
					url: that.$API.SPuser(),
					method:'GET',
					dataType:"json",
					success(res) {
						that.usercount = res.data.usercount;
						that.isshow = true;
					},
					fail(error) {
						that.isshow = true;
					}
				})
			},
			back(){
				uni.navigateBack({
					delta: 1
				});
			},
			getNumber(){
				let total = this.userxn + parseInt(this.usercount);
				if(total >= 10000){
					return (total/10000).toFixed(2) + 'w';
				}else if(total >= 1000){
					return (total/1000).toFixed(2) + 'k'; 
				}
				return total;
			},
			loadMore(){
				var that = this;
				that.$emit('loadMore')
			},
			getTopPic(isPage){
				var that = this;
				var page = that.page;
				if(isPage){
					page++;
				}
				that.$Net.request({
					url: that.$API.getMetasList(),
					data:{
						"searchParams":JSON.stringify(that.$API.removeObjectEmptyKey(data)),
						"limit":20,
						"order":"order",
						"page":page,
					},
					header:{
						'Content-Type':'application/x-www-form-urlencoded'
					},
					method: "get",
					dataType: 'json',
					success: function(res) {
						that.isLoading=1;
						that.isLoad=0;
						if(res.data.code==1){
							var list = res.data.data;
							if(list.length>0){
								var Topic = list;
								if(isPage){
									that.page++;
									that.Topic = that.Topic.concat(Topic);
								}else{
									that.Topic = Topic;
								}
							}else{
								that.moreText = that.$t('common.nomoredata');
							}
						}
					},
					fail: function(res) {
						that.isLoading=1;
						that.isLoad=0;
						that.moreText = that.$t('common.loadmoretxt');
					}
				})
			},
			replaceSpecialChar(text) {
				text = text.replace(/&quot;/g, '"');
				text = text.replace(/&amp;/g, '&');
				text = text.replace(/&lt;/g, '<');
				text = text.replace(/&gt;/g, '>');
				text = text.replace(/&nbsp;/g, ' ');
				return text;
			},
			toCategoryContents(title,id){
				var type="meta";
				uni.navigateTo({
				    url: '/pages/contents/contentlist?title='+title+"&type="+type+"&id="+id
				});
			},
			getPluginConfig() {
				const that = this;
				uni.request({
					url: that.$API.PluginLoad('sy_article'),
					data: {
						"action": "getConfig"
					},
					method: 'GET',
					dataType: "json",
					success(res) {
						if(res.data.code == 200) {
							that.quanzi_style = res.data.data.quanzi_style || 1;
							that.userlist_of = res.data.data.userlist_of || 1;
							that.userlist_all = res.data.data.userlist_all || 0;
							that.userxn = res.data.data.userxn || 0;
							that.getContinuous();
						}
					},
					fail(error) {
						that.getContinuous();
					}
				});
			},
		}
	}
</script>

<style scoped>
	/* 基础样式 */
	.userpost {
		min-height: 100vh;
		padding: 20rpx;
	}

	/* 用户统计区域 */
	.user-stats-section {
		margin-bottom: 30rpx;
	}

	.user-stats-card {
		background: #3cc9a4;
		border-radius: 20rpx;
		padding: 30rpx;
		margin: 0 10rpx;
		box-shadow: 0 10rpx 30rpx rgba(60, 201, 164, 0.3);
		transition: all 0.3s ease;
	}

	.user-stats-card:active {
		transform: translateY(2rpx);
		box-shadow: 0 5rpx 20rpx rgba(60, 201, 164, 0.4);
	}

	.user-stats-content {
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: white;
	}

	.user-avatars {
		display: flex;
		align-items: center;
		flex: 1;
	}

	.user-count {
		font-size: 28rpx;
		margin-left: 20rpx;
		font-weight: 500;
	}

	.user-title {
		display: flex;
		align-items: center;
	}

	.title-text {
		color: #fff;
		font-size: 32rpx;
		font-weight: 600;
		margin-right: 10rpx;
	}

	.arrow-icon {
		font-size: 24rpx;
		opacity: 0.8;
		color: #fff;
	}

	/* 分类容器 */
	.categories-container {
		padding: 0 10rpx;
	}

	/* 风格1：紧凑卡片 */
	.categories-grid {
		display: flex;
		flex-wrap: wrap;
		gap: 20rpx;
	}

	.category-card.compact {
		width: calc(50% - 10rpx);
		background: white;
		border-radius: 20rpx;
		overflow: hidden;
		box-shadow: 0 8rpx 25rpx rgba(0, 0, 0, 0.08);
		transition: all 0.3s ease;
		position: relative;
	}

	.category-card.compact:active {
		transform: translateY(-5rpx);
		box-shadow: 0 15rpx 35rpx rgba(0, 0, 0, 0.15);
	}

	.card-content {
		padding: 25rpx;
		display: flex;
		align-items: center;
		position: relative;
		z-index: 2;
	}

	.category-avatar {
		margin-right: 20rpx;
		flex-shrink: 0;
	}

	.avatar-image {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		border: 4rpx solid #f0f0f0;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
	}

	.avatar-image.default {
		background-color: #ecfdf5;
	}

	.category-info {
		flex: 1;
		min-width: 0;
	}

	.category-name {
		font-size: 30rpx;
		font-weight: 600;
		color: #333;
		display: block;
		margin-bottom: 8rpx;
		line-height: 1.3;
	}

	.category-desc {
		font-size: 24rpx;
		color: #666;
		line-height: 1.4;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.category-desc.placeholder {
		color: #999;
		font-style: italic;
	}

	.card-decoration {
		position: absolute;
		top: 0;
		right: 0;
		width: 60rpx;
		height: 60rpx;
		background: linear-gradient(135deg, #3cc9a4, #10b981);
		border-radius: 0 20rpx 0 60rpx;
		opacity: 0.1;
	}

	/* 风格2：大图卡片 */
	.categories-grid-large {
		display: flex;
		flex-wrap: wrap;
		gap: 25rpx;
	}

	.category-card.large {
		width: calc(50% - 12.5rpx);
		background: white;
		border-radius: 25rpx;
		overflow: hidden;
		box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.1);
		transition: all 0.3s ease;
		position: relative;
	}

	.category-card.large:active {
		transform: translateY(-8rpx);
		box-shadow: 0 20rpx 40rpx rgba(0, 0, 0, 0.18);
	}

	.card-image-container {
		position: relative;
		height: 200rpx;
		overflow: hidden;
	}

	.card-image {
		width: 100%;
		height: 100%;
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		transition: transform 0.3s ease;
	}

	.card-image.default {
		background-color: #f0fdf4;
	}

	.category-card.large:active .card-image {
		transform: scale(1.05);
	}

	.image-overlay {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: linear-gradient(to bottom, transparent 0%, rgba(60, 201, 164, 0.2) 100%);
	}

	.card-info {
		padding: 25rpx;
		position: relative;
	}

	.category-title {
		font-size: 32rpx;
		font-weight: 600;
		color: #333;
		display: block;
		margin-bottom: 12rpx;
		line-height: 1.3;
	}

	.category-subtitle {
		font-size: 26rpx;
		color: #666;
		line-height: 1.4;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.category-subtitle.placeholder {
		color: #999;
		font-style: italic;
	}

	.card-badge {
		position: absolute;
		top: 15rpx;
		right: 15rpx;
		background: rgba(255, 255, 255, 0.9);
		backdrop-filter: blur(10rpx);
		border-radius: 20rpx;
		padding: 8rpx 16rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
	}

	.badge-text {
		font-size: 22rpx;
		font-weight: 600;
		color: #3cc9a4;
	}

	/* 加载状态 */
	.loading-container {
		display: flex;
		justify-content: center;
		align-items: center;
		min-height: 400rpx;
		padding: 50rpx;
	}

	.loading-content {
		text-align: center;
		background: white;
		border-radius: 20rpx;
		padding: 40rpx;
		box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.1);
	}

	.loading-spinner {
		margin-bottom: 20rpx;
	}

	.loading-gif {
		width: 80rpx;
		height: 80rpx;
	}

	.loading-text {
		font-size: 28rpx;
		color: #666;
		font-weight: 500;
	}

	/* 响应式优化 */
	@media (max-width: 750rpx) {
		.category-card.compact,
		.category-card.large {
			width: 100%;
		}
		
		.categories-grid,
		.categories-grid-large {
			gap: 15rpx;
		}
	}


	.userpost.dark .category-card.compact,
	.userpost.dark .category-card.large,
	.userpost.dark .loading-content {
		background: #2d3748;
		color: white;
	}

	.userpost.dark .category-name,
	.userpost.dark .category-title {
		color: #e2e8f0;
	}

	.userpost.dark .category-desc,
	.userpost.dark .category-subtitle {
		color: #a0aec0;
	}

	.userpost.dark .avatar-image {
		border-color: #4a5568;
	}

	/* 动画效果 */
	@keyframes fadeInUp {
		from {
			opacity: 0;
			transform: translateY(30rpx);
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	.category-card {
		animation: fadeInUp 0.5s ease forwards;
	}

	.category-card:nth-child(1) { animation-delay: 0.1s; }
	.category-card:nth-child(2) { animation-delay: 0.2s; }
	.category-card:nth-child(3) { animation-delay: 0.3s; }
	.category-card:nth-child(4) { animation-delay: 0.4s; }
	.category-card:nth-child(5) { animation-delay: 0.5s; }
	.category-card:nth-child(6) { animation-delay: 0.6s; }

	/* 保留必要的工具类 */
	.clamp-text-1 {
		-webkit-line-clamp: 1;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		text-overflow: ellipsis;
		overflow: hidden;
	}

	.clamp-text-2 {
		-webkit-line-clamp: 2;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		text-overflow: ellipsis;
		overflow: hidden;
	}
</style>
